<template>
  <div id="air">
    <m-header :data="data"
              :facilitys="facilitys"
              :systemName="systemName"
              :activeName="activeName"
              @onSelectMenu="onSelectMenu"
              @selectChange="selectChange">
    </m-header>
    <router-view ref="child">

    </router-view>
  </div>
</template>

<script>
  import MHeader from '../../components/common/mHeader'
  import {mapActions, mapState} from 'vuex'
  export default {
    name: 'air',
    props: {},
    data () {
      return {
        systemName: '智能空压管理系统',
        activeName: 'monitoring',
        // 导航菜单
        // data: [
        //   {
        //     name: 'monitoring',
        //     text: '工艺监视',
        //     src1: require('../../assets/mainImages/icon_monitor1.png'),
        //     src: require('../../assets/mainImages/icon_monitor.png')
        //   },
        //   {
        //     name: 'controllers',
        //     text: '工艺控制',
        //     src: require('../../assets/mainImages/icon_control.png'),
        //     src1: require('../../assets/mainImages/icon_control1.png')
        //   },
        //   {
        //     name: 'energy',
        //     text: '工艺能效',
        //     src: require('../../assets/mainImages/icon_energy.png'),
        //     src1: require('../../assets/mainImages/icon_energy1.png')
        //   }
        // ],
        data: [
          {
            name: 'monitoring',
            text: '工艺监视',
            src1: require('../../assets/mainImages/icon_monitor1.png'),
            src: require('../../assets/mainImages/icon_monitor.png'),
            isMouse: false
          },
          {
            name: 'controllers',
            text: '工艺控制',
            src1: require('../../assets/mainImages/icon_control1.png'),
            src: require('../../assets/mainImages/icon_control.png'),
            isMouse: false
          },
          {
            name: 'energy',
            text: '工艺能效',
            src1: require('../../assets/mainImages/icon_energy1.png'),
            src: require('../../assets/mainImages/icon_energy.png'),
            isMouse: false
          }
        ]
        // 下拉框的 数据
        // facilitys: []
      }
    },

    created () {
      // this.getStation()
    },
    watch: {
      '$route': 'activePath'
    },
    mounted () {
      this.activeName = this.$route.name
    },
    computed: {
      ...mapState('user', {
        facilitys: state => state.facilitys
      })
    },
    methods: {
      ...mapActions('user', [
        'getFacility'
      ]),
      // 路由 变化的 时候 菜单跟着变化
      activePath () {
        this.activeName = this.$route.name
      },
      // 子路由 菜单的 点击事件
      onSelectMenu (item) {
        this.activeName = item.name
        this.$router.push({
          name: item.name
        })
      },
      // 右侧下拉框选择的方法
      selectChange (val) {
        this.$refs.child.allEmpty()
        this.getFacility(val)
        this.$refs.child.refreshData()
      }
      // 获取 下拉框的数据的 方法
      // getStation () {
      //   let params = {
      //     type: 50,
      //     spaceId: 175
      //   }
      //   window.myapi.getStation(params).then(res => {
      //     if (res.data.status === 200) {
      //       console.log(res.data)
      //       this.facilitys = res.data.data
      //       this.getFacility(this.facilitys[0].value)
      //     } else {
      //       let msg = res.data.msg ? res.data.msg : '请求数据失败!'
      //       this.$Message.error({content: msg, duration: 5, closable: true})
      //     }
      //   }).catch(function (e) {
      //     if (e && e.response && e.response.data) {
      //       let msg = e.response.data.message ? e.response.data.message : '请求数据失败!'
      //       this.$Message.error({content: msg, duration: 5, closable: true})
      //     }
      //   })
      // }
    },
    destroyed () {

    },
    components: {MHeader}
  }
</script>

<style lang='scss' scoped>
  #air {
    @include system-bg;
  }

  ul::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
    background: rgba(35, 89, 188, 1);
  }
</style>
